<script setup>
import {useRoute} from 'vue-router'
import {useCounterStore} from '../stores/counter'
import {onMounted} from 'vue'
let route = useRoute()
const store=useCounterStore()
onMounted(()=>{
    console.log(route.query.id);
    
    store.getcategoryList(route.query.id)
})
</script>
<template>
    <div class="contain">
        <div class="breadcrumb">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{route.query.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="all">
            <div class="all-top">
                <h2>全部分类</h2>
            </div>
            <div class="all-bottom">
                <div v-for="item in 6" class="all-bottom-item">
                    <img src="../assets/images/qrcode.jpg" width="60">
                    <span>干货</span>
                </div>
            </div>
        </div>
        <div class="category" v-for="item in 5" :key="item">
            <div class="category-top">
                <div class="category-title">
                    <h2>-南北干货-</h2>
                </div>
                <div class="category-title-right">查看全部<span class="iconfont icon-arrow-right-bold"></span></div>
            </div>
            <div class="category-bottom">
                <div v-for="item in 5" :key="item" class="category-bottom-item">
                    <div>
                        <img src="../assets/images/qrcode.jpg" alt="">
                    </div>
                    <div>
                        产地兰州
                    </div>
                    <div>
                        肉质清脆
                    </div>
                    <div>
                        <span>￥</span>26.00
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
.contain{
    width: 1240px;
    margin: 0 auto;
    .breadcrumb{
        padding: 15px 0;
    }
    .all{

        background-color: white;
        .all-top{
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .all-bottom{
            display: flex;
            margin-left: 20px;
            .all-bottom-item{
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 15px 30px;
            }
        }
    }
    .category{
        min-height: 100px;
        margin-top: 20px;
        background-color: white;
        .category-top{
            display: flex;
            justify-content: center;
            align-items: center;
            .category-title{
                display: flex;
                height: 50px;
                width: 90%;
                margin-left: 70px;
                justify-content: center;
                align-items: center;
                h2{
                    margin-left: 20px;
                }
            }
            .category-title-right{
                width: 100px;
                display: flex;
                justify-content:flex-end;
                margin-bottom: 15px;
            }
        }
        .category-bottom{
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            font-size: 16px;
            .category-bottom-item{
                div{
                    &:nth-child(2){
                        font-size: 20px;
                        color: #333333;
                    }
                    &:nth-child(3){
                        color: #A1A1A1;
                        padding-top: 3px;
                    }
                    &:nth-child(4){
                        font-size: 22px;
                        color: #AF2F22;
                        margin-bottom: 10px;
                    }
                }
            }
            
        }
    }
}
</style>